<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加文件</title>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<div class="image-show-div" style="display: none;padding: 20px">
    <img src="" id="image-show" style="max-width: 300px">
</div>

<div style="padding: 20px 50px 10px 50px">
    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar" lay-filter="demo" lay-percent="0%"></div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;text-align: center">
    <legend>文件上传</legend>
    <div style="padding: 20px">
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin: 0 200px">
                    <select name="storageType" lay-filter="storageType">
                        <option value="al_cos">AlCos</option>
<!--                        <option value="tx_cos">TxCos</option>-->
                        <option value="ftp" disabled>FTP</option>
                        <option value="local" disabled>LOCAL</option>
                    </select>
                </div>
            </div>
        </form>
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">

            </div>
        </div>
    </div>
</fieldset>

<script src="/static/layui/layui.js"></script>
<script src="/static/v1/js/clipboard.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function () {
            var form = layui.form
                , $ = layui.$
                , upload = layui.upload
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            var storageType = $("[name=storageType]").val();
            var clipboard = new ClipboardJS('.layui-layer-btn0');
            clipboard.on('success', function (e) {
                layer.msg("信息已经复制到剪切板", {time: 1000});
            });

            form.on('select(storageType)', function (data) {
                storageType = data.value;
                uploadInst.reload({url: uploadUrl + "/" + storageType});
            });

            var uploadUrl = "/rest/file/add";
            var element = layui.element;


            var xhrOnProgress = function (fun) {
                xhrOnProgress.onprogress = fun; //绑定监听
                //使用闭包实现监听绑
                return function () {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof xhrOnProgress.onprogress !== 'function')
                        return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                        xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                }
            };

            //拖拽上传
            var uploadInst = upload.render({
                elem: '#test10'
                , accept: 'file'
                , size: 1024 * 256
                , url: uploadUrl + "/" + storageType //改成您自己的上传接口
                , done: function (res) {
                    console.log(res);
                    var accessURL = res.data.accessUrl;
                    if (res.code == '200') {
                        layer.open({
                            type: 1,
                            content: $(".image-show-div")
                            , btn: ['复制链接', '跳转', '关闭']
                            , btn1: function (index, layero) {
                                console.log("btn1")
                            },
                            btn2: function () {
                                console.log("btn2");
                                window.open(accessURL, "_blank");
                                return false
                            }
                            , cancel: function () {

                            }, success: function (layero, index) {
                                $(".image-show-div").show();
                                if (isImageUrl(accessURL)) {
                                    $(".image-show-div").html("<img src='" + accessURL + "!thum" + "'style='max-width: 300px'>");
                                } else {
                                    $(".image-show-div").html(accessURL);
                                }
                                $(".layui-layer-btn0").attr("data-clipboard-text", accessURL);
                            }, end: function () {
                                $(".image-show-div").hide();
                            }
                        });
                    } else {
                        layer.msg("上传失败");
                    }
                }, xhr: xhrOnProgress,
                progress: function (value) {//上传进度回调 value进度值
                    console.log('demo', value + '%');//设置页面进度条
                    element.progress('demo', value + '%');
                }
            });

            function isImageUrl(accessURL) {
                if (accessURL != null) {
                    accessURL = accessURL.toLowerCase()
                }
                if (accessURL.indexOf("png") > 0
                    || accessURL.indexOf("jpeg") > 0
                    || accessURL.indexOf("jpg") > 0) {
                    return true;
                }
                return false;
            }
        }
    );
</script>

</body>
</html>
